<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 条纹表格</title>
<!-- bootstrap 相关 * 3 -->
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- bootstrap 分页插件 -->
<script src="${ctx.contextPath}/js/bootstrap-paginator.js"></script>
<!-- tmpl 前端模版引擎 -->
<script src="${ctx.contextPath}/js/jquery.tmpl.min.js"></script>
<!-- bootstrap-validator -->
<link href="https://cdn.bootcss.com/bootstrap-validator/0.5.3/css/bootstrapValidator.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>
<!-- bootstrapgrowl 提示信息 -->
<script src="${ctx.contextPath}/js/jquery.bootstrap-growl.js"></script>
<!-- bootbox 确认框 -->
<script src="https://cdn.bootcss.com/bootbox.js/4.4.0/bootbox.js"></script>
<!-- bootstrap max length -->
<script src="https://cdn.bootcss.com/bootstrap-maxlength/1.7.0/bootstrap-maxlength.min.js"></script>
</head>
<body>
    <div id="data_all" style="display: none;">
        <button type="button" class="btn btn-default" data-toggle="modal" data-target="#addGroupModal">
            <span class="glyphicon glyphicon-plus"> 新增</span>
        </button>
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>名称</th>
                    <th>编码</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="data_list">
                <tr>
                    <th>{{= name}}</th>
                    <th>{{= code}}</th>
                    <th><a href="javascript:edit({{= id}})">修改</a> <a href="javascript:del({{= id}})">删除</a> <a href="javascript:edit({{= id}})">维护字典组</a></th>
                </tr>
            </tbody>
        </table>
        <ul id="pagination"></ul>
        <!-- group add modal -->
        <div class="modal fade" id="addGroupModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabel">新增字典组</h4>
                    </div>
                    <form role="form" id="addgroupform" action="/dictionarygroup/add" method="post">
                        <div class="modal-body">
                            <div class="form-group">
                                <label for="name">名称</label> <input type="text" class="form-control" maxlength="10" placeholder="请输入名称" name="name">
                            </div>
                            <div class="form-group">
                                <label for="name">编码</label> <input type="text" class="form-control" maxlength="10" placeholder="请输入编码" name="code">
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="button" class="btn btn-primary" onclick="addgroup();">提交</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!-- group add modal -->
        <!-- group update modal -->
        <div class="modal fade" id="updateGroupModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabel">修改字典组</h4>
                    </div>
                    <form role="form" id="updategroupform" action="/dictionarygroup/update" method="post">
                        <div class="modal-body">
                            <div class="form-group">
                                <label for="name">名称</label> <input type="text" class="form-control" maxlength="10" id="groupUpdateName" placeholder="请输入名称" name="name">
                            </div>
                            <div class="form-group">
                                <label for="name">编码</label> <input type="text" class="form-control" maxlength="2" id="groupUpdateCode" placeholder="请输入编码" name="code">
                            </div>
                        </div>
                        <input type="hidden" id="groupUpdateId" name="id">
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="button" class="btn btn-primary" onclick="updategroup();">提交</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!-- group update modal -->
    </div>
</body>
<script>
    $(function() {

        // 默认加载第一页
        loadTmpl(1);

    });

    // 新增-数据字典组-模态提交
    function addgroup() {
        $.ajax({
            type : "POST",
            url : "${ctx.contextPath}/dictionarygroup/add",
            data : $('#addgroupform').serialize(),
            async : false,
            success : function(data) {
                success();
            }
        });
    }

    // 新增-数据字典组-模态隐藏重置操作
    $('#addGroupModal').on('hidden.bs.modal', function() {
        $('#addgroupform')[0].reset();
        // $("#addGroupModal").data('bootstrapValidator').destroy();
        // $('#addGroupModal').data('bootstrapValidator', null);
        // groupUpdateValidator();
    });

    // 单击编辑-触发事件
    function edit(id) {
        queryId = id;
        $('#updateGroupModal').modal({
            show : true,
            backdrop : true
        // 单击阴影关闭
        })
    }

    // 模态显示加载数据
    $("#updateGroupModal").on("show.bs.modal", function() {
        $.ajax({
            type : "POST",
            dataType : "json",
            url : "${ctx.contextPath}/dictionarygroup/browse/" + queryId,
            // async:false,
            success : function(data) {
                // 模态数据填充
                $("#groupUpdateId").val(data.result.id);
                $("#groupUpdateName").val(data.result.name);
                $("#groupUpdateCode").val(data.result.code);
                // 校验
                //                 groupUpdateValidator();
            },
            error : function(error) {
                alert("error");
            }
        })
    });

    // 编辑-数据字典组-模态提交
    function updategroup() {
        $.ajax({
            type : "POST",
            url : "${ctx.contextPath}/dictionarygroup/update",
            data : $('#updategroupform').serialize(),
            async : false,
            success : function(data) {
                success();
            }
        });
    }

    // 修改-数据字典组-模态隐藏重置操作
    $('#updateGroupModal').on('hidden.bs.modal', function() {
        $('#updategroupform')[0].reset();
        //         $("#updateGroupModal").data('bootstrapValidator').destroy();
        //         $('#updateGroupModal').data('bootstrapValidator', null);
        //         groupUpdateValidator();
    });

    // 修改-数据字典组-校验
    function groupUpdateValidator() {
        $("#updateGroupModal").bootstrapValidator({
            message : 'This value is not valid',
            feedbackIcons : {
                valid : 'glyphicon glyphicon-ok',
                invalid : 'glyphicon glyphicon-remove',
                validating : 'glyphicon glyphicon-refresh'
            },
            fields : {
                name : {
                    validators : {
                        notEmpty : {
                            message : '名称不能为空'
                        },
                        stringLength : {
                            max : 20,
                            message : '名称最长 20 位'
                        }
                    }
                },
                code : {
                    validators : {
                        notEmpty : {
                            message : '英文值不能为空'
                        },
                        stringLength : {
                            max : 20,
                            message : '英文值最长 20 位'
                        },
                        remote : {
                            url : "${ctx.contextPath}/dictionarygroup/querygroupcode",
                            data : {
                                code : $('#groupUpdateCode').val(),
                                id : $('#groupUpdateId').val()
                            },
                            message : "字典组编码已存在",
                            type : "get",
                            dataType : 'json',
                            delay : 200,
                        },
                    }
                },
                order : {
                    validators : {
                        notEmpty : {
                            message : '顺序不能为空'
                        },
                        stringLength : {
                            max : 10,
                            message : '顺序最长 10 位'
                        },
                        digits : {
                            message : '顺序只能包含数字'
                        }
                    }
                },
            }
        });
    }

    // 删除操作
    function del(id) {
        bootbox.setLocale("zh_CN");
        bootbox.confirm({
            message : "确认删除?",
            size : "small",
            backdrop : true, // 单击阴影退出
            callback : function(result) {
                if (result) {
                    $.ajax({
                        type : "POST",
                        dataType : "json",
                        url : "${ctx.contextPath}/dictionarygroup/delete",
                        data : {
                            id : id
                        },
                        success : function(data) {
                            success();
                        }
                    })
                }
            }
        })
    }

    // 加载分页:入参页码
    function loadTmpl(pageNum) {
        $.ajax({
            type : "POST",
            dataType : "json",
            url : "${ctx.contextPath}/dictionarygroup/searchpage",
            data : {
                pageNum : pageNum
            },
            // async:false,
            success : function(data) {

                // 分页数据填充
                // $("#data_list").tmpl(data.resultList).appendTo('#data_list');
                tmplDataBindTo("#data_list", data.resultList);

                // 分页页码填充
                var options = {
                    bootstrapMajorVersion : 3,
                    alignment : 'center',
                    currentPage : data.pageNum,
                    numberOfPages : 5,
                    totalPages : data.totalPage,
                    onPageClicked : function(event, originalEvent, type, page) {
                        // 绑定分页页码请求
                        loadTmpl(page);
                    }
                };
                $(document).ready(function() {
                    $("#pagination").bootstrapPaginator(options);
                });

                // 展示 dom
                $("#data_all").show();

            },
        });
    }

    // 成功提示+分页+清除数据+关闭模态
    function success() {
        $.bootstrapGrowl("操作成功");
        $("#addGroupModal").modal('hide'); // 手动关闭
        $("#updateGroupModal").modal('hide'); // 手动关闭
        loadTmpl(1);
    }

    // 木星提供该方法
    function tmplDataBindTo(c, d) {
        d = $(c).tmpl(d);
        $(c).empty();
        $(c).show();
        d.appendTo(c)
    }
</script>
</html>